<script setup>
import { Icon } from '@iconify/vue';
import { useI18n } from 'vue-i18n';
import { getThemeColor, subscribe } from '../../assets/theme.js';
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  mode: { type: String, default: 'explorer' },
  show: { type: Boolean, default: true },
});
const emit = defineEmits(['update:mode']);
const { t } = useI18n();

function setMode(m) {
  emit('update:mode', m);
}

const activityBarClass = ref(getThemeColor('interface.activityBar'));
const buttonClass = ref(getThemeColor('interactive.hover'));
const activeClass = ref(getThemeColor('interactive.active'));
const mutedClass = ref(getThemeColor('text.muted'));

let unsubscribe;
onMounted(() => {
  unsubscribe = subscribe(() => {
    activityBarClass.value = getThemeColor('interface.activityBar');
    buttonClass.value = getThemeColor('interactive.hover');
    activeClass.value = getThemeColor('interactive.active');
    mutedClass.value = getThemeColor('text.muted');
  });
});

onUnmounted(() => {
  if (unsubscribe) {
    unsubscribe();
  }
});
</script>

<template>
  <div 
    v-show="show"
    :class="`w-8 flex flex-col items-center py-1 gap-1 ${activityBarClass}`"
  >
    <button
      :class="`h-7 w-7 inline-flex items-center justify-center rounded ${buttonClass} ${mode==='explorer' ? activeClass : mutedClass}`"
      @click="setMode('explorer')"
      :title="t ? (t('menu.explorer') || 'Explorer') : 'Explorer'"
      aria-label="Explorer"
    >
      <Icon icon="codicon:files" width="16" height="16" class="text-current" />
    </button>
    <button
      :class="`h-7 w-7 inline-flex items-center justify-center rounded ${buttonClass} ${mode==='search' ? activeClass : mutedClass}`"
      @click="setMode('search')"
      :title="t ? (t('menu.search') || 'Search') : 'Search'"
      aria-label="Search"
    >
      <Icon icon="codicon:search" width="16" height="16" class="text-current" />
    </button>
    <button
      :class="`h-7 w-7 inline-flex items-center justify-center rounded ${buttonClass} ${mode==='timeline' ? activeClass : mutedClass}`"
      @click="setMode('timeline')"
      :title="t ? (t('menu.timeline') || 'Timeline') : 'Timeline'"
      aria-label="Timeline"
    >
      <Icon icon="codicon:timeline" width="16" height="16" class="text-current" />
    </button>
  </div>
</template>